<template>
  <div style="z-index: 100;overflow: auto;background: rgb(245, 245, 245)"
       class="fixed top-0 left-0 w-full h-full bg-white">
    <div class="pt-12" style="background: #1D91FF">
      <order-nav>
        <template #default>
          <div class="flex items-center chat flex justify-center">
            <van-badge class="w-35 h-33 mr-22" :content="6">
              <img class="w-full h-full" src="~@/assets/image/c2c/Vector-white.png" alt="">
            </van-badge>
            <span class="font-28 text-white">{{ $t('联系卖家')}}</span>
          </div>
        </template>
      </order-nav>
      <div class="flex justify-between items-center mt-20 px-32 pb-50 text-white">
        <div>
          <div class="font-52">交易成功</div>
          <div class="mt-26 font-26">您已成功购买 2,352.22 USDT</div>
        </div>
        <div>
          <img class="w-92 h-92" src="~@/assets/image/c2c/Group181.png" alt="">
        </div>
      </div>
    </div>
    <div class="pt-46 pb-30 bg-white">
      <order-data
          :count="count"
          :total-price="totalPrice"
          :order-number="orderNumber"
          :create-order-time="createOrderTime"
          client-type="买家昵称"
          seller-name="钱多多爱妞商行"
      >
        <div class="w-full h-16 mb-40" style="background: rgb(245, 245, 245)"></div>
      </order-data>
    </div>
    <div class="px-32 mt-16 bg-white py-39">
      <h2 class="font-400 font-30">交易方式</h2>
      <div class="flex items-center mt-28">
        <div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
        <span class="ml-9 font-22 text-grey">银行卡</span>
      </div>
    </div>
    <van-divider/>
    <evaluation class="pb-60 bg-white"/>
    <div class="mt-16">
      <div class="flex justify-between items-center h-100 px-32 bg-white">
        <div>
          <span class="font-30 text-black">关注此用户</span>
        </div>
        <div class="switch">
          <van-switch v-model="checked"/>
        </div>
      </div>
      <div class="flex justify-between items-center h-100 px-32 mt-16 bg-white">
        <div>
          <span class="font-30 text-black">对订单存在疑问</span>
        </div>
        <div>
          <van-icon name="arrow" class="font-700"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import {
  Badge,
  Divider,
  Cell,
  CellGroup,
  Switch,
  Icon,
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
import Evaluation from "@/page/c2cOrder/payment/components/Evaluation";

export default {
  name: "TradeSuccessDetail",
  data() {
    return {
      checked: false,
    }
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'orderNumber', 'createOrderTime'])
  },
  components: {
    [Badge.name]: Badge,
    [Divider.name]: Divider,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Switch.name]: Switch,
    [Icon.name]: Icon,
    OrderNav,
    OrderData,
    Evaluation,
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

::v-deep {
  .van-nav-bar__right {
    padding: 0;
  }

  .van-nav-bar__arrow {
    color: #fff;
  }

  .van-nav-bar {
    background: #1D91FF;
  }

  .van-cell {
    padding: 0 32px !important;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .order-data {
    .title {
      padding: 0 32px;
    }
  }
}

.switch {
  transform: scale(.7) translateX(20px);
}

.chat {
  width: 232px;
  height: 64px;
  background: linear-gradient(310.03deg, #1D91FF 14.76%, #B6DBFF 84.98%);
  border-radius: 36px 0px 0px 36px;
}

</style>